<template>
  <div class="j-pagination">
    <span class="j-pagination__total">共 {{ count }} 条</span>
    <button type="button" disabled="disabled" class="btn-prev">
      <i class="el-icon el-icon-arrow-left"></i>
    </button>
    <ul class="j-pager">
      <li class="number active"  v-for="(data, index) in Math.ceil(this.count / this.pageSize)" :key="index">{{ data }}</li>
    </ul>
    <button type="button" class="btn-next">
      <i class="el-icon el-icon-arrow-right"></i>
    </button>
    <span class="j-pagination__jump">前往<div
      class="j-input j-pagination__editor is-in-pagination">
      <input type="number" autocomplete="off" min="1" max="5" class="j-input__inner">
    </div>页</span>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    count: 0,
    currentPage: 0,
    pageSize: 0
  },
  data() {
    return {
      page_count: 0,
    }
  },
  methods: {
    calc() {
      this.page_count = Math.ceil(this.count / this.pageSize);
    }
  }
};
</script>

<style scoped>
* {
  outline: none;
}

.el-pagination .el-pager li,
.el-pagination .btn-prev,
.el-pagination button:disabled,
.el-pagination .btn-next,
.el-pagination .el-input__inner {
  color: #97feff;
  background: none;
  border: 1px solid #0254d5;
  border-radius: 0;
  font-size: .8vw;
}

.el-pagination .el-pager li.active {
  color: #ffffff;
  background: #0090fd;
  border: 1px solid #0254d5;
}

.el-pagination .el-pagination__total,
.el-pagination .el-pagination__jump {
  color: #97feff;
}

.el-pagination .el-input__inner {
  /*background: url("../../assets/pagination/item.png") 0 0 / 100% 100%;*/
  background: none;
  border: .1vw solid #0254d5;
  border-radius: 0;
  color: #97feff;
}

.el-pager {
  display: inline-block;
  list-style: none;
}

.el-pager li {
  padding: .3vw .9vw;
  color: #97feff;
  cursor: pointer;
}

.el-pagination button {
  padding: .3vw .7vw;
  border: none;
  margin: 0 .5vw;
  cursor: pointer;
}

.el-pagination__editor {
  display: inline-block;
}

.el-input__inner {
  line-height: 2vw;
  min-width: 4vw;
  text-align: center;
  margin: 0 .5vw;
}

.el-input__inner::-webkit-outer-spin-button,
.el-input__inner::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.el-input__inner[type="number"]{
  -moz-appearance: textfield;
}

.el-pagination__total,
.el-pagination__jump {
  font-size: .85vw;
}

.el-pagination__jump {
  margin-left: .5vw;
}

</style>
